<template>
  <d2-container>
    <div class="flex-1 ml-2 mt-3">
      <div class="flex-1 row-ac">
        <div class="row-ac">
          <div class="font-s-2 text-light-grey mr-1">分销商查询</div>
          <div>
            <el-input size="mini" v-model="queryInfo.search" placeholder="用户名/手机号"></el-input>
          </div>
        </div>
        <div class="ml-2">
          <el-button size="mini" type="primary" @click="clickQuery">查询</el-button>
        </div>
      </div>
    </div>
    <div class="flex-1 ml-2 mt-2">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="分销商" name="distributors">
          <el-table :data="distributorsList" border stripe>
            <el-table-column type="expand" width="33">
              <template slot-scope="props">
                <div class="flex-1 mx-3">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="可提现余额:">
                      <span class="text-danger">{{ props.row.commission_amount }}</span>
                    </el-form-item>
                    <el-form-item label="佣金总金额:">
                      <span class="text-danger">{{ props.row.total_commission }}</span>
                    </el-form-item>
                    <el-form-item label="已提现:">
                      <span class="text-danger">{{ props.row.used_commission }}</span>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="序号" type="index" width="50" />
            <el-table-column align="center" label="用户" prop="user_name" width="70">
              <template slot-scope="scope">
                <span v-if="scope.row.nick_name != null">{{ scope.row.nick_name }}</span>
                <span v-else>{{ scope.row.user_name }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="联系手机" prop="phone" width="70" />
            <el-table-column align="center" label="上级" prop="user_name" width="70">
              <template slot-scope="scope">
                <span v-if="scope.row.leader_nickname != null">{{ scope.row.leader_nickname }}</span>
                <span v-else>{{ scope.row.leader_name }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="推广用户数量" prop="total_subordinates" width="60" />
            <el-table-column align="center" label="邀请码" prop="mark_id" width="60" />
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="toSubdistributors(scope.row.user)">下级分销商</el-button>
                <el-button size="mini">修改</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="审核分销商" name="auditStatus">
          <el-table :data="distributorsList" border stripe>
            <el-table-column align="center" label="id" prop="id" width="50" />
            <el-table-column align="center" label="用户" prop="user_name" width="70">
              <template slot-scope="scope">
                <span v-if="scope.row.nick_name != null">{{ scope.row.nick_name }}</span>
                <span v-else>{{ scope.row.user_name }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="联系手机" prop="phone" width="70" />
            <el-table-column align="center" label="用户" prop="user_name" width="70">
              <template slot-scope="scope">
                <span v-if="scope.row.leader_nickname != null">{{ scope.row.leader_nickname }}</span>
                <span v-else>{{ scope.row.leader_name }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="推广用户数量" prop="total_distributors" width="60" />
            <el-table-column align="center" label="邀请码" prop="mark_id" width="60" />
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="openPatch(scope.row.id)">审核</el-button>
                <el-button size="mini">修改</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="flex-1 ml-2 mt-2">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="distributorsTotal">
        </el-pagination>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {
    distributorsListUrl,
    distributorsDetailUrl,
    distributorsCreateUrl,
    distributorsUpdateUrl,
    distributorsPatchUrl,
    distributorsDeleteUrl,
  } from '@/utils/distribution'
  export default {
    data() {
      return {
        queryInfo: {
          search: '',
          audit_status: 'True',
          page: 1,
          page_size: 10
        },
        auditStatus: {
          audit_status: '',
        },
        activeName: 'distributors',
        distributorsList: [],
        distributorsTotal: 1
      }
    },
    created() {
      this.getDistributorsList()
    },
    methods: {
      handleClick(tab, event) {
        if (tab.paneName == 'distributors') {
          this.queryInfo.audit_status = 'True'
          this.getDistributorsList()
        } else if (tab.paneName == 'auditStatus') {
          this.queryInfo.audit_status = 'False'
          this.getDistributorsList()
        }
      },
      clickQuery() {
        this.getDistributorsList()
      },
      getDistributorsList() {
        this.$get(distributorsListUrl, this.queryInfo).then(res => {
          if (res.data.code == 200) {
            this.distributorsList = res.data.data.list
            this.distributorsTotal = res.data.data.total
            console.log(this.distributorsList);
          }
        })
      },
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.page_size = newSize
        this.getOrderList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getOrderList()
      },
      openPatch(auditId) {
        this.$confirm('该店铺是否通过审核?', '提示', {
          confirmButtonText: '通过',
          cancelButtonText: '拒绝',
          type: 'warning'
        }).then(() => {
          this.auditStatus.audit_status = 1
          this.$patch(distributorsPatchUrl + auditId + '/', this.auditStatus).then(res => {
            this.getDistributorsList()
            this.$message({
              type: 'success',
              message: '审核成功'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'success',
            message: '拒绝'
          });
        });
      },
      toSubdistributors(user_id) {
        this.$router.push({
          path: '/distribution/subdistributors',
          query: {
            userId: user_id // 添加第二个参数
          }
        });
      }
    }
  }
</script>

<style>
</style>
